<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择活动区域">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUserSimpleList, addDepartment, FinddepartmentById, changeDepartmentbyId } from '@/api/departments'
export default {
  // 导出组件，name--deptDialog
  name: 'DeptDialog',
  // 4.组件传值---父向子传值  导入子组件传的parentId
  props: {
    parentId: {
      type: [String, Number],
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      form: {
        name: '',
        code: '',
        introduce: '',
        manager: ''
      },
      userList: [],
      // 验证表单--基础验证==方法见https://element.eleme.cn/#/zh-CN/component/form
      // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const res = await getUserSimpleList()
    this.userList = res.data
    console.log(res.data)
    this.FinddepartmentById()
  },
  methods: {
    // 确定添加
    async add() {
      const res = await addDepartment({ ...this.form, pid: this.parentId })
      // 给用户添加成功的提示
      console.log(res)
      this.$message.success(res.message)
      // 目标---让父组件关闭弹框，刷新页面数据，更新数据
      // 1.子向父传值 --- 给子组件添加this.$emit('自定义事件名')
      // 2.子向父传值 --- 父组件添加@事件名='函数名'
      // 3.子向父传值 --- 父组件写method方法 函数名() {'目标' }
      this.$emit('updata-list')
    },
    cancel() {
      this.$emit('cancel')
    },
    // 编辑调用接口回填数据 封装一个数据回调的函数
    async FinddepartmentById() {
      if (this.isEdit === true) {
        // 调用 根据ID查询部门详情 的接口
        const res = await FinddepartmentById(this.parentId)
        this.form = res.data
      }
    },
    // 编辑之后的新数据--下一步是点确定
    async edit() {
      const res = await changeDepartmentbyId(this.form)
      this.$message.success(res.message)
      this.$emit('updata-list')
    },

    onSubmit() {
      // 兜底验证
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.isEdit === true ? this.edit() : this.add()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
form.el-form {
  padding: 0px 60px 0px 30px;
}
.el-select {
  width: 100%;
}
</style>
